<template>
  <a-row class="form-row" :gutter="16">
    <a-col :md="12">
      <a-card :bordered="false">
        <!-- 多列柱状图 -->
        <a-button class="backBtn" @click="backList" type="primary">返回</a-button>
        <formBarMultid title="随机资料供需图" :fields="fields" :dataSource="barMutidDataSource" :height="height" @barClick="barClick" />
      </a-card>
    </a-col>
    <a-col :md="12">
      <a-card :bordered="false">
        <formPie title="随机资料分布图" :dataSource="pieDataSource" :height="height"/>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
    import formBarMultid from '@/components/chart/formBarMultid'
    import formPie from '@/components/chart/formPie'
    import { getBranchInfoList,fileDetailsInfoList,fileTypeRadio,fileInOut } from '@/api/digitization'
    import { triggerWindowResizeEvent } from '@/utils/util'

    export default {
      name: "BIform.vue",
      components: {formBarMultid, formPie},
      data(){
        return {
          height: 420,
          fields:[],
          barMutidDataSource: [
            // { type: '需求数', '辽宁-1': 13, '青岛-1': 1, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
            // { type: '供应数', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
          ],
          barList:[],
          pieDataSource:[
            // { item: '示例一', count: 80 },
            // { item: '示例二', count: 21 },
            // { item: '示例三', count: 17 },
            // { item: '示例四', count: 13 },
            // { item: '示例五', count: 9 }
          ]
        }
      },
      created(){
        this.backList();
      },
      mounted(){
        triggerWindowResizeEvent();
      },
      methods:{
        backList(){
          this.getBarMultid();
          this.getpPie();
        },
        getBarMultid(branchId){
          let params = {};
          if(branchId){
            params = {branchId};
          }
          fileInOut(params).then(res => {
            if(!res.result.length) {
              this.barList = [];
              this.barMutidDataSource = [];
              return false;
            }
            this.barList = res.result;
            this.barMutidDataSource = [];

            let resTitle = { type: '需求数'};
            let supTitle = { type: '供应数'};
            let resquestObj = {};
            let supperObj = {};
            res.result.forEach(opt => {
              if(opt.requestNum === null){
                opt.requestNum = 0
              }
              if(opt.supportNum === null){
                opt.supportNum = 0
              }
              resquestObj[opt.branchName] = opt.requestNum;
              supperObj[opt.branchName] = opt.supportNum;

              this.fields.push(opt.branchName)
            })
            resquestObj = {...resTitle,...resquestObj};
            supperObj = {...supTitle,...supperObj};
            this.barMutidDataSource.push(resquestObj,supperObj);
          });
        },
        getpPie(fileType){
          // 入参 fileType（非必传）
          let params = {};
          if(fileType){
            params = {fileType};
          }
          fileTypeRadio(params).then(res => {
            if(!res.result.length) {
              this.pieDataSource = [];
              return false;
            }

            this.pieDataSource = [];
            res.result.forEach(opt => {
              this.pieDataSource.push({
                item: opt.fileType,
                count: opt.fileCount
              })
            })
          })
        },
        barClick(v){
          console.log('bar',v)
          if(!v.data) return;
          let name = v.data._origin.x.replace(/_/g,'-');
          let item = this.barList.find(opt => opt.branchName == name)
          this.getBarMultid(item.branchid);
          this.getpPie(item.branchid);
        },

      }
    }
</script>

<style scoped>
.backBtn{
  float: right;
}
</style>